<template>
  <div :class="{
    'top-part': true,
    'top-part-dark': isDarkTheme,
    'top-part-light': !isDarkTheme
  }">

    <CustomTitle 
      :pageConfig="pageConfig"
      :title="title"
    >
      <template>
        <div class="top-part-type-container">
        <!-- 类型: -->
          <div
            :class="{
              'top-part-type': true,
              'active': activeType === index
            }"
            v-for="(item, index) in typeList"
            @click="handleTypeClick(item, index)"
          >{{ item }}</div>
        </div>
      </template>
    </CustomTitle>
    <WarningTable 
      ref="warningTable"
      :pageConfig="pageConfig"
      :title="title"
      @handleRowClick="handleRowClick"
    >
    </WarningTable>
  </div>
</template>

<script>
import CustomTitle from '../components/CustomTitle.vue';
import WarningTable from './WarningTable.vue';

export default {
  props: {
    pageConfig: Object
  },
  components: {
    CustomTitle,
    WarningTable,
  },
  data() {
    return {
      title: '预警信息',
      activeType: 0,
      typeList: ['宕机-10条', '超时-10条', '超量-10条', '异常-10条'],
    }
  },

  computed: {
    isDarkTheme () {
      return !!this.pageConfig.isDarkTheme
    }
  },
  methods: {
    handleTypeClick (item, index) {
      this.activeType = index;
      this.$refs.warningTable.changeTable(index);

    },
    handleRowClick (row) {
      this.$emit('handleRowClick', row);
    }
  },

}
</script>

<style lang="less" scoped>
.top-part {
  height: 30%;
  font-size: 12px;
  .top-part-type-container {
    display: flex;
    justify-content: space-between;
  }
  .top-part-type {
      height: 25px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
  }
}
.top-part-dark {
  color: #fff;
  .top-part-type {
    background: url('../css/btn-bg-dark.png') no-repeat;
    background-size: 100% 100%;
  }
  .top-part-type.active {
    background: url('../css/btn-bg-dark-active.png') no-repeat;
    background-size: 100% 100%;
  }
}

// 2K
@media screen and (max-width: 2560px) {
   .top-part {
    font-size: 18px;
    .top-part-type {
      height: 30px;
      width: 110px;
    }
  }
}
// 全高清屏幕
@media screen and (max-width: 1920px) {
  .top-part {
    font-size: 12px;
    .top-part-type {
      height: 25px;
      width: 70px;
    }
  }
}
  
</style>